<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-if="props.dialogVisible" v-model="props.dialogVisible" title="选择模型" width="1200px" append-to-body :before-close="closeDialog">
    <div class="model-info__main" v-loading="loading">
      <div class="model-info__tree">
        <el-input v-model="queryName" placeholder="请输入节点或模型名称" prefix-icon="Search" clearable style="margin-bottom: 10px" />
        <div style="display: flex; align-items: center; margin-bottom: 6px; flex-wrap: wrap">
          <span class="explanation">符号说明：</span>
          <span class="sub_explanation"> <img :src="database" alt="" style="height: 20px; width: 16px; margin-right: 5px" />要素数据库</span>
          <span class="sub_explanation"><img :src="Scene" alt="" style="height: 20px; width: 18px; margin-right: 5px" />业务场景</span>
          <span class="sub_explanation"> <img :src="system" alt="" style="height: 20px; width: 18px; margin-right: 5px" />业务系统</span>
          <span class="sub_explanation"> <img :src="model" alt="" style="height: 20px; width: 16px; margin-right: 5px" />普通模型</span>
          <span class="sub_explanation"> <img :src="generalModel" alt="" style="height: 20px; width: 16px; margin-right: 5px" />通用模型</span>
        </div>
        <el-card shadow="never" style="overflow: auto; padding: 5px 0 50px 0">
          <el-tree
            ref="deptTreeRef"
            class="tree"
            :indent="0"
            default-expand-all
            highlight-current
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <span style="display: flex; align-items: center">
                <img :src="getImageSrc(data)" alt="" style="height: 16px; width: 16px" />
                <span class="sub_title">{{ data.name }}</span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </div>
      <div class="model-fields__main">
        <el-card shadow="never">
          <el-table v-loading="loading" :data="metaList" style="width: 100%" border>
            <el-table-column label="模型名称" align="center" prop="modelName" fixed="left" show-overflow-tooltip />
            <el-table-column label="模型标识" align="center" prop="modelType" show-overflow-tooltip />
            <el-table-column label="模型类型" align="center" prop="modelType" show-overflow-tooltip />
            <el-table-column label="所属节点" align="center" prop="nodeName" show-overflow-tooltip />
            <el-table-column label="版本号" align="center" prop="versionNumber" show-overflow-tooltip
              ><template #default="scope">
                {{ scope.row.versionNumber || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="模型描述" align="center" prop="description" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.description || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" fixed="right">
              <template #default="scope">
                <el-button size="small" link type="primary" @click="chooseModel(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="AllFileView">
import system from '@/assets/images/modelEstablish/system.svg';
import database from '@/assets/images/modelEstablish/database.svg';
import model from '@/assets/images/modelEstablish/model.svg';
import home from '@/assets/images/modelEstablish/home.svg';
import Scene from '@/assets/images/modelEstablish/Scene.svg';
import generalModel from '@/assets/images/modelEstablish/generalModel.svg';
import { getElementModel, getModellTree } from '@/api/metaData/model.ts';
const emit = defineEmits(['handleEvent']);
const props = defineProps(['dialogVisible']);
const loading = ref(false);
const treeData = ref([]);
const modelInfo = ref({});
const queryName = ref('');
const deptTreeRef = ref();
const defaultProps = { children: 'children', label: 'label' };
const metaList = ref([]);
const queryParams = ref({
  nodeId: '1879453303423115265',
  modelId: '',
  pageQuery: {
    pageNum: 1,
    pageSize: 999,
    orderByColumn: 'id',
    isAsc: 'descending'
  },
  modelName: '',
  modelType: ''
});
const initialModelId = ref('');
const closeDialog = () => {
  emit('handleEvent', { type: 'cancel' });
};
const sureChoose = () => {
  emit('handleEvent', { type: 'sure', modelInfo: modelInfo.value });
};
const chooseModel = (row) => {
  modelInfo.value = row;
  sureChoose();
};

// 过滤树结构
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
};
// 初始化图标
const getImageSrc = (data) => {
  if (data.type === 'root') {
    return home;
  } else if (data.type === 'database_1' || data.type === 'database_2') {
    return database;
  } else if (data.type === 'scene') {
    return Scene;
  } else if (data.type === 'system') {
    return system;
  } else if (data.type === 'model') {
    return model;
  } else if (data.type === 'common_model') {
    return generalModel;
  }
  return null;
};
watchEffect(
  () => {
    deptTreeRef.value?.filter(queryName.value);
  },
  {
    flush: 'post'
  }
);
watch(
  () => treeData.value,
  () => {
    setNodeAfterWidth();
  },
  { deep: true }
);
const setNodeAfterWidth = () => {
  if (!deptTreeRef.value) return;
  nextTick(() => {
    document.querySelectorAll('.el-tree-node').forEach((node) => {
      if (node.querySelector('.el-tree-node__expand-icon.expanded')) {
        node.style.setProperty('--after-width', '18px');
      } else {
        node.style.setProperty('--after-width', '30px');
      }
    });
  });
};
const getTreeData = () => {
  const params = {
    id: null,
    rootModelOnly: 1
  };
  getModellTree(params)
    .then((res) => {
      if (res) {
        treeData.value = [res.data];
      }
    })
    .catch(() => {
      treeData.value = [];
    })
    .finally(() => {
      loading.value = false;
    });
};
const getList = () => {
  // loading.value = true;
  getElementModel(queryParams.value)
    .then((res) => {
      if (res) {
        metaList.value = res.rows || [];
        // total.value = res.total || 0;
      }
    })
    .catch(() => {
      metaList.value = [];
      // total.value = 0;
    })
    .finally(() => {
      // loading.value = false;
    });
};
// 左键点击节点获取模型列表
const handleNodeClick = (data) => {
  if (data.type !== 'model' && data.type !== 'common_model') {
    queryParams.value.modelId = '';
    queryParams.value.nodeId = data.id;
  } else {
    initialModelId.value = Object.values(data.versionIdMap).at(-1);
    queryParams.value.nodeId = data.nodeId;
    queryParams.value.modelId = initialModelId.value;
  }
  getList();
};
onMounted(() => {
  getTreeData();
  setNodeAfterWidth();
});
</script>

<style lang="scss" scoped>
.model-info__main {
  display: flex;
  .model-info__tree {
    width: 350px;
    margin-right: 10px;
    .explanation {
      font-size: 13px;
      font-weight: bold;
      height: 20px;
      line-height: 20px;
      color: #606266;
    }

    .sub_explanation {
      font-size: 12px;
      height: 20px;
      display: flex;
      align-items: center;
      color: #707477;
      margin-right: 15px;
    }
  }
  .model-fields__main {
    flex: 1;
  }
}
/* 树形结构节点添加连线 */
:deep .tree {
  .el-tree-node {
    position: relative;
    padding-left: 10px;
    /* 缩进量 */
  }

  .el-tree-node__children {
    padding-left: 15px;
    /* 缩进量 */
  }

  /* 竖线 */
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  /* 当前层最后一个节点的竖线高度固定 */
  .el-tree-node:last-child::before {
    height: 40px;
    /* 可以自己调节到合适数值 */
  }

  /* 横线 */
  .el-tree-node::after {
    content: '';
    width: var(--after-width, 30px);
    height: 20px;
    position: absolute;
    left: -3px;
    top: 13px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  /* 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了 */
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  /* 展开关闭的icon */
  .el-tree-node__expand-icon {
    font-size: 12px;
    /* 叶子节点（无子节点） */
    &.is-leaf {
      color: transparent;
      /* 也可以去掉 */
      // display: none;
      width: 12px;
    }
  }
}
</style>
